<template>
	<view class="search-commodity__-">
		<view class="search-commodity__-status_bar">
			<!-- 这里是状态栏 -->
			<view class="iconfont iconright" @click="backLink"></view>
			<view class="input">
				<input type="text" placeholder="搜索商品" confirm-type="search" @confirm="handelSearch" />
			</view>
		</view>
		<view class="hea-menu">
			<view class="item all-content" @tap="tapIndex=0" :class="tapIndex == 0 ? 'active-item' : ''">
				<view class="title">综合推荐</view>
				<view class="iconfont iconright" :class="tapIndex == 0 ? 'icon-active' : ''"></view>
			</view>
			<view class="item" @tap="tapIndex=1" :class="tapIndex == 1 ? 'active-item' : ''">销量</view>
			<view class="item price-content" @tap="tapIndex=2" :class="tapIndex == 2 ? 'active-item' : ''">
				<view>价格</view>
				<view>
					<view class="iconfont iconjiagepaixu" :class="tapIndex == 2 ? 'active-title':''">
					</view>
				</view>
			</view>
			<view class="item" @tap="tapIndex=3" :class="tapIndex == 3 ? 'active-item' : ''">新品优先</view>
		</view>
		<view class="other-menu" v-show="tapIndex == 0">
			<view class="title" @tap.stop="secondTapIndex = 0" :class="secondTapIndex == 0 ? 'active-title' : ''">综合推荐</view>
			<view class="title" @tap.stop="secondTapIndex = 1" :class="secondTapIndex == 1 ? 'active-title' : ''">扩散自定义排序</view>
		</view>
		<view class="commodities" :style="tapIndex == 0 ? 'margin-top:140upx;' : ''">
			<price-commodity @event="handelPriceCommodity(item.unid,item.price)" class="item" v-for="(item,index) in SearchGoods" :id="item.unid" :src="item.mainImg" :price="item.price" :change="item.sales"
			 :describe="item.goods_name"></price-commodity>
		</view>
		<floating-ball @event="handelFloatBall"></floating-ball>
	</view>
</template>

<script>
	import priceCommodity from '../../components/commodityShow/price-commodity.vue'
	import floatingBall from '../../components/floating-ball-menu/floating-ball-menu.vue'
	import util from "@/common/util.js";
	export default {
		components: {
			priceCommodity,
			floatingBall
		},
		data() {
			return {
				tapIndex: 0,
				secondTapIndex: 0,
				SearchGoods:[], //搜索商品
				SearchInput:null, //搜索框内容
			}
		},
		onLoad(e) {
			let data = JSON.parse(e.data)
			console.log(data.value);
			this.SearchInput = data.value
			let resData = {
				goods_name:this.SearchInput
			}
			this.$shopApi.apiPost('font/goods/infos',resData).then(res => {
				const DATA = res.data
				if(DATA.code == 200){
					// this.util.mainImages(DATA)
					for (var i = 0; i < DATA.data.list.length; i++) {
						if(DATA.data.list[i].images.length!=0){
							DATA.data.list[i].mainImg = this.util.getMainImage(DATA.data.list[i].images)
						}else{
							DATA.data.list[i].mainImg = this.defimg
						}
					}
					this.SearchGoods = DATA.data.list
					console.log('搜索商品',this.SearchGoods);
				}
			})
		},
		methods: {
			// 回退上一页
			backLink() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 更新商品信息
			getCommodity(type) {
				let resData = {}
				if(type){
					resData.sort = type
				}
				if(this.SearchInput){
					resData.goods_name = this.SearchInput
				}
				this.$shopApi.apiPost('font/goods/infos',resData).then(res => {
					const DATA = res.data
					if(DATA.code == 200){
						// this.util.mainImages(DATA)
						for (var i = 0; i < DATA.data.list.length; i++) {
							if(DATA.data.list[i].images.length!=0){
								DATA.data.list[i].mainImg = this.util.getMainImage(DATA.data.list[i].images)
							}else{
								DATA.data.list[i].mainImg = this.defimg
							}
						}
						this.SearchGoods = DATA.data.list
						console.log('搜索商品',this.SearchGoods);
					}
				})
			},
			// 点击商品
			handelPriceCommodity(unid,price) {
				this.$interface.routeLink({
					route: 'commonDetail',
					data: {
						id: unid,
						price: price
					}
				})
			},
			// 搜索商品
			handelSearch(e) {
				let val = e.detail.value
				this.SearchInput = val
				let resData = {
					goods_name:this.SearchInput
				}
				this.$shopApi.apiPost('font/goods/infos',resData).then(res => {
					const DATA = res.data
					if(DATA.code == 200){
						// this.util.mainImages(DATA)
						for (var i = 0; i < DATA.data.list.length; i++) {
							if(DATA.data.list[i].images.length!=0){
								DATA.data.list[i].mainImg = this.util.getMainImage(DATA.data.list[i].images)
							}else{
								DATA.data.list[i].mainImg = this.defimg
							}
						}
						this.SearchGoods = DATA.data.list
						console.log('搜索商品',this.SearchGoods);
					}
				})
			}
		},
		watch: {
			tapIndex() {
				if(this.tapIndex == 0){
					console.log(this.tapIndex);
					this.getCommodity()
				}
				if (this.tapIndex != 0) {
					if(this.tapIndex == 1){
						console.log(this.tapIndex);
						this.getCommodity(3)
					}else if(this.tapIndex == 2){
						console.log(this.tapIndex);
						this.getCommodity(1)
					}else if(this.tapIndex == 3){
						console.log(this.tapIndex);
						this.getCommodity(2)
					}
				}
			},
			secondTapIndex() {
				this.getCommodity()
				console.log(22);
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FAFAFA;
	}

	.search-commodity__- {
		.search-commodity__-status_bar {
			width: 100%;
			padding: 66upx 30upx 4upx 30upx;
			background-color: #FFFFFF;
			box-sizing: border-box;
			display: flex;

			.iconright {
				color: #333333;
				line-height: 60upx;
				transform: rotate(180deg);
			}

			.input {
				margin-left: 20upx;

				input {
					background: #F5F5F5;
					opacity: 1;
					border-radius: 16px;
					width: 452upx;
					height: 60upx;
					line-height: 60upx;
					text-align: center;
				}
			}
		}

		.hea-menu {
			margin-top: 4upx;
			padding: 0 30upx;
			background-color: #FFFFFF;
			display: flex;
			justify-content: space-between;
			position: relative;

			.active-item {
				border-bottom: 4upx solid #E6B873;
			}

			.item {
				font-size: 14px;
				font-family: Source Han Sans CN;
				font-weight: bold;
				line-height: 20px;
				color: #333333;
				opacity: 1;
				padding: 28upx 0;
			}

			.all-content {
				display: flex;

				.iconright {
					font-weight: 100;
					font-size: 24upx;
					margin-left: 6upx;
				}

			}

			.price-content {
				display: flex;

				.iconjiagepaixu {
					margin-left: 8upx;
					font-size: 24upx;
					color: #CDCDCD;
				}
			}
		}

		.other-menu {
			position: absolute;
			z-index: 99;
			width: 100%;
			height: 140upx;
			background-color: #F6F6F6;
			padding: 0 38upx;
			padding-top: 10upx;
			box-sizing: border-box;

			.title {
				font-size: 24upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				line-height: 36upx;
				color: #333333;
				opacity: 1;
				margin-bottom: 20upx;
			}

		}


		.icon-active {
			color: #E6B873;
			transform: rotate(90deg);
		}

		.commodities {
			display: flex;
			justify-content: space-between;
			width: 100%;
			padding: 0 30upx 24upx 30upx;
			box-sizing: border-box;
			flex-wrap: wrap;

			.item {
				width: calc(50% - 9upx);
			}

		}

		.active-title {
			color: #E6B873 !important;
		}
	}
</style>
